<template>
	<view class="dropdown" :style="position + ': 0;top:' + Top + 'rpx;width:' + width">
		<view class="dropdown-mask" @click="handlerMask"></view>
		<view class="ul">
			<view class="li" v-for="item in list" :key="item.value" @click="handlerItem(item)">
				{{item.title || item.value}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'dropdown',
		props: {
			list: {
				type: Array,
				default: () => ([])
			},
			Top: {
				type: Number,
				default: () => 82
			},
			width: {
				type: String,
				default: () => '100%'
			},
			position: {
				type: String,
				default: () => 'left'
			}
		},
		methods: {
			handlerItem(value) {
				this.$emit('select', value)
			},
			handlerMask() {
				this.$emit('close')
			},
		}
	}
</script>

<style scoped lang="scss">
	.dropdown {
		position: absolute;
		z-index: 100;

		.ul {
			position: relative;
			z-index: 101;
			list-style: none;
			background-color: #8288a3;
			border-radius: 6rpx;
			padding-left: 0;
			box-shadow: 0px 0px 16rpx 0px rgba(30, 34, 54, 0.4);

			.li {
				color: #fff;
				padding: 20rpx;
				font-size: 28rpx;
				height: 80rpx;
				line-height: 40rpx;
			}

			li:last-child {
				border-bottom: none;
			}
		}

		.dropdown-mask {
			top: 0;
			left: 0;
			position: fixed;
			width: 100vw;
			height: 100vh;
			z-index: 99;
			touch-action: none;
		}
	}
</style>
